<template>
	<!-- 书籍简介 -->
	<view class="BooksSynopsisBox">
		<!-- 封面 -->
		<view class="CoverBox">
			<image :src="CoverUrl" mode=""></image>
		</view>
		<!-- 详情 -->
		<view class="InfoBox">
			<view class="TopBox">
				<view class="NameBox">
					{{BooksName}}
				</view>
				<view class="PriceBox">
					{{Price}}豆
				</view>
			</view>
			<view class="CenterBox">
				{{Synopsis}}。
			</view>
			<view class="BottomBox">
				<view class="ClassNumber">
					words · {{Wordage}}
				</view>
				<view class="BntBox" @click="HandleBtn" :style="{background: BtnStatus === 1 ? '#fad7d9':'#E5353F' }">
					<view class="ReadText" v-if="BtnStatus === 2">
						<text>
							立即阅读
						</text>
						<!-- <text v-else>
							购买并阅读
						</text> -->
					</view>
					<view class="PurchaseBox" v-if="BtnStatus === 1">
						<view class="icoBox">
							
						</view>
						<view class="PurchaseText">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps } from 'vue'


const props = defineProps({
	// 书籍id
	Id:{
		type:Number,
		default:0
	},
	// 封面图片地址
	CoverUrl:{
		type:String,
		default:'../../punlic/image/bg.jpg'
	},
	// 书籍名
	BooksName:{
		type:String,
		default:'西游记'
	},
	// 价格
	Price:{
		type:Number,
		default:3455
	},
	// 简介
	Synopsis:{
		type:String,
		default:'捕捉战灵，附体作战，一位即将在未来只手遮天的‘超深渊’正在发育。'
	},
	// 分类
	ClassName:{
		type:String,
		default:'东方玄幻'
	},
	// 字数
	Wordage:{
		type: [Number,String],
		default:106
	},
	// 按钮状态 1 立即购买 2 立即阅读
	BtnStatus:{
		type:Number,
		default:2
	},
	IsOwn: {
		type: Number,
		default: -1
	}
})
console.log(props.IsOwn)
// 按钮事件
const HandleBtn = () => {
	if(props.BtnStatus === 2){
		uni.navigateTo({
			url:'/pages/bookDetalis/bookDetalis?id='+props.Id+"&imgurl="+props.CoverUrl + "&isOwn=" + props.IsOwn
		})
	}
}

</script>

<style lang="less">
	.BooksSynopsisBox {
		width: 694rpx;
		height: 212rpx;
		border-radius: 20rpx;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// 封面
		.CoverBox {
			margin-left: 20rpx;
			width: 122rpx;
			height: 172rpx;
			border-radius: 8rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		// 详情
		.InfoBox {
			width: 512rpx;
			margin-right: 20rpx;

			.BottomBox {
				margin-top: 8rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ClassNumber {
					color: #000000;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					opacity: 0.5;
				}

				.BntBox {
					width: 160rpx;
					height: 44rpx;
					border-radius: 12rpx;
					

					.ReadText {
						width: 100%;
						height: 100%;
						color: #ffffff;
						font-family: "PingFang SC";
						font-size: 24rpx;
						text-align: center;
						font-weight: 400;
						line-height: 44rpx;
					}
					.PurchaseBox{
						display: flex;
						align-items: center;
						.icoBox{
							width: 44rpx;
							height: 44rpx;
							background-color: #E5353F;
							border-radius: 12rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.PurchaseText{
							width: calc(160rpx - 44rpx);
							height: 100%;
							text-align: center;
							line-height: 44rpx;
							 color: #e5353f;
							 font-family: "PingFang SC";
							 font-size: 24rpx;
							 font-style: normal;
							 font-weight: 400;
						}
					}

				}
				

			}

			.CenterBox {
				margin-top: 10rpx;
				width: 100%;
				height: 68rpx;
				color: #000000;
				text-align: justify;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				opacity: 0.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.TopBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.NameBox {
					width: 80%;
					color: #000000;
					font-family: "PingFang SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					 white-space: nowrap;      /* 禁止换行 */
					  overflow: hidden;         /* 超出部分隐藏 */
					  text-overflow: ellipsis;  /* 超出部分显示省略号 */
				}

				.PriceBox {
					width: 20%;
					color: #e5353f;
					text-align: right;
					font-family: "PingFang SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
			}
		}
	}
</style>